<script setup lang="ts">
import CommonConfig from "./CommonConfig.vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
import type { DefColumn } from "@/views/def/table/DefColumn";
import { queryList } from "@/api/def/columnctrl/";

const config = defineModel<FormDesignerComponents>("config");
const defTablePickerRef = ref(null);
const columnList = ref<DefColumn[]>([]);

const handleOpenPicker = () => {
  defTablePickerRef?.value.show();
};

const queryColumnDataList = () => {
  queryList({
    tableId: config.value.props.sourceTableId,
    columnShow: true
  }).then(res => {
    if (res.code === 200) {
      columnList.value = res.data;
    }
  });
};

const handleTableChange = row => {
  config.value.props.sourceTableId = row.id;
  config.value.props.sourceTableComment = row.tableComment;
  queryColumnDataList();
};

onMounted(() => {
  if (config.value.props.sourceTableId) {
    queryColumnDataList();
  }
});
</script>

<template>
  <CommonConfig v-model:config="config" />
  <el-form-item label="标签位置">
    <el-radio-group v-model="config.props.labelPosition">
      <el-radio-button label="上面" value="top" />
      <el-radio-button label="靠左" value="left" />
      <el-radio-button label="靠右" value="right" />
    </el-radio-group>
  </el-form-item>
  <el-form-item label="标签宽度">
    <el-input type="number" v-model="config.props.labelWidth"></el-input>
  </el-form-item>
  <el-form-item label="实体表" required>
    <el-input v-model="config.props.sourceTableComment" :disabled="true" placeholder="请选择实体表">
      <template #append>
        <el-button icon="Search" @click="handleOpenPicker" />
      </template>
    </el-input>
  </el-form-item>
  <DefTablePicker ref="defTablePickerRef" @change="handleTableChange" />
  <el-form-item label="查询条件" required>
    <el-checkbox-group v-model="config.props.queryColumnKeys">
      <el-checkbox
        v-for="(item, index) in columnList"
        :key="index"
        :value="item.columnKey"
        :label="item.columnComment"
      ></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<style lang="scss" scoped></style>
